<template>
    <div class="visitor">
        <img src="../../static/img/common/hideImg.png" class="hideImg" @click="changeShow">
        <div class="left" v-show="showHide">
            <div class="markBg">
                <div class="title title1">今日数据统计</div>
                <div class="dayDatasBox">
                    <div class="dayDatasLine">
                        <span>实时在园人数</span>
                        <u v-if="todayData.onCount != null" v-for="(item,index) in todayData.onCount + ''" :key="index">{{item}}</u>
                        <span>人</span>
                    </div>
                    <div class="orangeText">今日预测人流高峰时段 {{todayData.peakTime}}</div>
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{todayData.bookingNum}}</span>
                                <u>人</u>
                            </div>
                            <div class="bottom">当日预约人数</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{todayData.inCount}}</span>
                                <u>人</u>
                            </div>
                            <div class="bottom">当日入园人数</div>
                        </div>
                    </div>
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{todayData.outCount}}</span>
                                <u>人</u>
                            </div>
                            <div class="bottom">当日出园人数</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span v-if="todayData && todayData.bookingRatio">{{(todayData.bookingRatio * 100).toFixed(2)}}%</span>
                            </div>
                            <div class="bottom">预约人数日环比</div>
                        </div>
                    </div>
                </div>
                <div class="title title2">今日各时段客流统计</div>
                <div class="dayTimesBox">
                    <div id="dayTimes" style="width: 100%;height: 100%;"></div>
                </div>
                <div class="title title3">今日各时刻在园游客统计</div>
                <div class="dayPersonBox">
                    <div id="dayPerson" style="width: 100%;height: 100%;"></div>
                </div>
                <div class="title title4">客流数据统计</div>
                <div class="personFlowBox">
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{passenger.bookingNum | toMillionNums}}</span>
                                <u v-if="passenger.bookingNum    * 1 <= 9999">人</u>
                                <u v-else>万人</u>
                            </div>
                            <div class="bottom">总预约人数</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{passenger.footfallNum | toMillionNums}}</span>
                                <u v-if="passenger.footfallNum * 1 <= 9999">人</u>
                                <u v-else>万人</u>
                            </div>
                            <div class="bottom">总入园人数</div>
                        </div>
                    </div>
                    <div class="parkNumBox">
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{passenger.repeatedlyBookingNum | toMillionNums}}</span>
                                <u v-if="passenger.repeatedlyBookingNum * 1 <= 9999">人</u>
                                <u v-else>万人</u>
                            </div>
                            <div class="bottom">总多次预约人数</div>
                        </div>
                        <div class="parkNumItem">
                            <div class="top">
                                <span>{{passenger.repeatedlyFootfallNum | toMillionNums}}</span>
                                <u v-if="passenger.repeatedlyFootfallNum * 1 <= 9999">人</u>
                                <u v-else>万人</u>
                            </div>
                            <div class="bottom">总多次入园人数</div>
                        </div>
                    </div>
                </div>
            </div>

            <!--<div class="ageBox">-->
            <!--<div class="title">各年龄段总人数统计</div>-->
            <!--<div id="ageCharts" style="width:100%;height: 200px;"></div>-->
            <!--</div>-->
            <!--<div class="ageBox">-->
            <!--<div class="title title1">近30天二次入园统计</div>-->
            <!--</div>-->
            <!--<div class="sourceBox">-->
            <!--<div class="title">近30天游客境内来源排名</div>-->
            <!--</div>-->
            <!--<div class="sourceAllBox"></div>-->
        </div>
        <div class="bottomBox" v-show="showHide">
            <div class="markBg">
                <div class="sevenBox">
                    <div class="title title5">近七天客流量统计</div>
                    <div id="parkSeven" style="width: 100%;height: 222px;"></div>
                </div>
                <div class="morePersonBox">
                    <div class="title title6">多次预约游客统计</div>
                    <div id="moreMake" style="width: 100%;height: 222px;"></div>
                </div>
                <div class="dayAgeBox">
                    <div class="title title7">今日国内各年龄段入园统计</div>
                    <div id="allInPark" style="width: 100%;height: 222px;"></div>
                </div>
            </div>
        </div>
        <div class="left left1" v-show="!showHide">
            <div class="markBg">
                <div class="title title8" @click="showWindow()">国内游客来源地排名<i class="threeBar" title="打开国内游客来源地排名详细"></i>
                </div>
                <div class="lineTitle">
                    <span>今日入园游客来源地排名TOP6</span>
                    <div>
                        <img src="../../static/img/common/dottedLine.png" style="width: 140px;">
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="weekDatasTitle">
                    <i></i><span>今日入园游客总数量</span><b>{{todayInpark}}</b>
                </div>
                <div class="dayTop6Box">
                    <div id="dayTop6" style="width: 354px;height: 180px;"></div>
                </div>
                <div class="title title9">国外游客统计</div>
                <div class="abroadBox">
                    <div id="abroad" style="width: 354px;height: 190px;"></div>
                    <div class="numStyle numStyle1">{{abroadAllNums | toMillionNums}}</div>
                    <div class="numStyle numStyle2">人</div>
                    <div v-if="abroadObj && abroadObj.length > 0">
                        <div class="rateBox rateBox1">
                            <div style="width: 90px;margin-bottom: 15px;" v-for="(item,index) in abroadObj" :key="index">
                                <div style="line-height: 18px;margin-bottom: 4px;">
                                    <b>{{item.userNumber}}</b><u>人</u>
                                </div>
                                <div style="line-height: 12px;">
                                    <i :class="'icolor' + (index+1)"></i><span>{{item.userSource}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else>
                        <div class="rateBox rateBox1">
                            <div style="width: 90px;margin-bottom: 15px;" v-for="(item,index) in abroadEmpty" :key="index">
                                <div style="line-height: 18px;margin-bottom: 4px;">
                                    <b>{{item.userNumber}}</b><u>人</u>
                                </div>
                                <div style="line-height: 12px;">
                                    <i :class="'icolor' + (index+1)"></i><span>{{item.userSource}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="title title10">近七天核销占比趋势</div>
                <div class="prop7DatasBox">
                    <div id="dayTop7" style="width: 354px;height: 220px;"></div>
                </div>
            </div>
        </div>
        <!-- 点位 -->
        <allin-marker :select-arr="selectArr" :select-menu-arr="selectMenu"  @setmapdata="setMarake"></allin-marker>
        <!--弹窗-->
        <div class="windowAlert" v-show="alertWindowShow" ref="windowBox">
            <div class="title" style="display:block;">国内游客来源地排名</div>
            <span class="close" @click="showWindow"></span>
            <div class="tabs clearfix">
                <span :class="{ spanActive : spanActive == 1 }" @click="changeDates(1)">省份排名</span>
                <span :class="{ spanActive : spanActive == 2 }" @click="changeDates(2)">河北省</span>
            </div>
            <div class="provinceBox" v-show="spanActive == 1">
                <div class="timesBox">
                    <span :class="{ spanChange : isClick == 1 }" @click="changeTime(1)">当日</span>
                    <span :class="{ spanChange : isClick == 2 }" @click="changeTime(2)">近七天</span>
                    <span :class="{ spanChange : isClick == 3 }" @click="changeTime(3)">近三十天</span>
                </div>
                <div class="timesChart">
                    <div id="provinceChart1" style="width: 450px;height: 500px;"></div>
                    <div id="provinceChart2" style="width: 450px;height: 500px;"></div>
                </div>
            </div>
            <div class="hebeiBox" v-show="spanActive == 2">
                <div class="hebeiTitle">近三十天入园游客趋势图</div>
                <div id="monthInPark" style="width:936px;height: 230px;"></div>
                <div class="hebeiTitle">近三十天各市累计入园游客排名</div>
                <div id="monthRank" style="width:936px;height: 230px;"></div>
            </div>
        </div>
    </div>
</template>

<script type="javascript" src="./visitor.js"></script>
<style lang="scss" src="./visitor.scss"></style>
